<!--
 * @Author: Chuckie
 * @Email: chuckie@slanwell.com
 * @Date: 2023-06-06 17:51:46
 * @LastEditTime: 2023-06-08 14:51:13
 * @Description: 
 * @FilePath: /base-web/src/views/lowcode/designer.vue
 *  
-->
<template>
  <div class="app-container">
    <v-form-designer ref="vfDesignerRef" class="vform">
      <template #customToolButtons>
        <el-button type="text" @click="openDialog">保存页面</el-button>
      </template>
    </v-form-designer>
    <!-- <VFormDesigner ref="vfDesignerRef" :designer-config="state.designerConfig">
      <template #customToolButtons>
        <el-button type="text" @click="openDialog">保存页面</el-button>
      </template>
    </VFormDesigner> -->

    <el-dialog
      v-model="state.dialog.visiable"
      class="dialog"
      align-center
      draggable
      title="保存页面"
      width="600"
      destroy-on-close
    >
      <el-form :model="state.dialog.form">
        <el-form-item label="页面CODE">
          <el-input v-model="state.dialog.form.code" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="页面DATA">
          <el-input
            v-model="state.dialog.form.config"
            type="textarea"
            rows="10"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialog.visiable = false">取消</el-button>
          <el-button type="primary" @click="submitDialog">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const { proxy }: any = getCurrentInstance()
const vfDesignerRef = ref()
const route = useRoute()
const router = useRouter()

const state = reactive({
  designerConfig: {
    resetFormJson: false,
    toolbarMaxWidth: 490
  },
  dialog: {
    visiable: false,
    form: {
      id: null,
      code: '',
      config: '',
      type: 1,
      version: 0
    }
  }
})

const submitDialog = async () => {
  if (route.params.id) {
    state.dialog.form.version += 1
    const data = await axiosReq({
      url: '/base/page/config',
      method: 'put',
      data: state.dialog.form
    })
    proxy.$message({ message: data.message, type: data.code === 20000 ? 'success' : 'error' })
    state.dialog.visiable = false
    router.push('/lowcode/list')
  } else {
    const data = await axiosReq({
      url: '/base/page/config',
      method: 'post',
      data: state.dialog.form
    })
    proxy.$message({ message: data.message, type: data.code === 20000 ? 'success' : 'error' })
    state.dialog.visiable = false
    router.push('/lowcode/list')
  }
}

const openDialog = () => {
  console.log(vfDesignerRef.value.getFormJson())
  state.dialog.visiable = true
  state.dialog.form.config = JSON.stringify(vfDesignerRef.value.getFormJson())
}

onMounted(() => {
  if (route.params.id) {
    axiosReq({
      url: `/base/page/config/${route.params.id}`,
      method: 'get'
    }).then((res) => {
      state.dialog.form.id = res.data.id
      state.dialog.form.code = res.data.code
      state.dialog.form.version = res.data.version
      vfDesignerRef.value.setFormJson(JSON.parse(res.data.config))
    })
  }
})
</script>

<style lang="scss"></style>
